<template>
    <div id="card">
        <div id="title">{{title}}</div>
        <div id="img">
            <div id="img-img" v-for="item in Info" :key="item.id">
                <img class="img" :src="item.imgurl" :width="coursesWidth" :height="coursesHeight">
                <div id="card-cont">
                    <div id="course-title"><span>{{courseTitle}}</span></div>
                    <div id="course-cont">
                        <span>{{company}}</span>
                        <span id="bor">{{teacher}}</span>
                        <span>{{classHour}}课时</span>
                        <button>查看详情</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: { // 组件传入的内容
        title: String,
        coursesWidth: String,
        coursesHeight: String,
        courseTitle: String,
        company: String,
        teacher: String,
        classHour: String,
        Info: Array // 每个卡片的内容
    }
}
</script>

<style scoped>
    #title{
        width:240px;
        height:32px;
        font-size:110%;
        color:white;
        text-align:center;
        line-height:32px;
        margin-top:40px;
        margin-left:125px;
        background-color:rgb(0,160,234);
    }
    #img{
        margin-left:75px;
        display:flex;
        flex-wrap:wrap;
    }
    #img-img{
        width:342px;
        height:230px;
        margin-top:32px;
        margin-left:50px;
        border: 1px solid rgb(0,160,232); 
    }
    #card-cont{
        height:66px;
        background-color:rgb(250,250,250);
    }
    #course-title{
        margin-left:20px;
    }
    #course-title span{
        display:block;
        font-size:18px;
        font-weight:550;
    }
    #course-cont{
        display:flex;
        margin-left:14px;
        align-items: center;
    }
    #course-cont span{
        display:block;
        height:16px;
        line-height:16px;
        width:60px;
        font-size:12px;
        text-align:center;
        color:rgb(190,190,190)
    }
    #bor{
        border-left:1px solid rgb(190,190,190);
        border-right:1px solid rgb(190,190,190);
    }
    button{
        width:80px;
        height:25px;
        line-height:25px;
        font-size: 14px;
        border-radius: 1px;
        background-color:rgb(0,164,236);
        border:none;
        color:white;
        margin-left:50px;
    }
</style>
